<script setup lang="ts">
import myUser from "@/composables/myUser.ts";
import myAuth from "@/composables/myAuth.ts";

import dayjs from "dayjs";

const route = useRoute();
const u_id =  route.params?.u_id
const {getOneUser,user,topics,getOneUserTopics} = myUser()
await getOneUser(u_id);
await getOneUserTopics({page:route.query.page || 1,u_id:route.params.u_id})
</script>

<template>
<main class="me" v-if="user">
  <my-me-avatar :user="user"/>
  <div class="bottom">
    <div class="buttons">
      <router-link :to="{name:'person.me'}" :class="{active:$route.name == 'person.me'}">
        TA的帖子
      </router-link>
      <router-link :to="{name:'person.me_comment'}" :class="{active:$route.name == 'person.me_comment'}">
        TA的评论
      </router-link>
      <router-link v-if="myAuth().is_mine(u_id)" :to="{name:'person.me_favorite'}" :class="{active:$route.name == 'person.me_favorite'}">
        我的收藏
      </router-link>
    </div>
    <div class="list" v-if="topics && topics.data?.length > 0">
      <el-card shadow="never">
        <section class="item" v-for="(topic,index) in topics.data" :key="index">
          <div class="left" @click="$router.push({name:'front.topic.show',params:{t_id:topic.id}})">
            <el-tag type="danger">帖子</el-tag>
            <span>{{topic.title}}</span>
          </div>
          <div class="right">
            <icon-timer size="14" fill="#50e3c2"/>
            {{dayjs(topic.created_at).fromNow()}}
          </div>
        </section>
      </el-card>
      <my-pagination :per_page="topics.meta.per_page" :total="topics.meta.total"
                     @currentChange="$router.push({ name: 'person.me',params:{u_id:$route.params.u_id}, query: { page: $event } })"
      />
    </div>
    <div v-else class="flex justify-center items-center p-3 text-slate-600 text-sm gap-2">
      <icon-info size="16" fill="#f5a623" /> TA没有发表过帖子
    </div>
  </div>
</main>
</template>

<style lang="scss" scoped>
main.me{
  @apply min-h-screen p-3;

  div.bottom{
    @apply mt-2;
    div.buttons{
      @apply flex justify-center items-center gap-2 ;
      a{
        @apply bg-slate-800 text-slate-100 py-1 px-2 text-xs rounded hover:bg-slate-600 duration-300;
        &.active{
          @apply bg-slate-600;
        }
      }
    }
    div.list{
      @apply mt-3;
      section.item{
        @apply flex justify-between items-center border-b border-b-slate-300;
        div.left{
          @apply flex justify-start items-center gap-2 text-slate-600 p-3
          hover:text-green-600 cursor-pointer duration-300;
          ;
        }
        div.right{
          @apply flex justify-end items-center text-xs text-slate-500 gap-2;
        }
      }
    }
  }
}
</style>